<template>
	<view>
		<view class="header">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<image src="/static/images/1.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/2.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/3.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="grid-item">美食</view>
			<view class="grid-item">装修</view>
			<view class="grid-item">洗浴</view>
			<view class="grid-item">汽车</view>
			<view class="grid-item">唱歌</view>
			<view class="grid-item">住宿</view>
			<view class="grid-item">学习</view>
			<view class="grid-item">工作</view>
			<view class="grid-item">结婚</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	swiper{
		width:750rpx;
		height:400rpx;
	image{
		width:100%;
		height:100%
		}
	}
	
	.content{
		// display: flex;
		// flex-wrap:wrap;
		// height:100%;
		
		// //  设置每一个格子的属性
		// view{
		// 	width: calc((750rpx - 8px)/3);
		// 	/* 设置每个九宫格的宽度*/
		// 	height: 200rpx;
		// 	background-color: #fff;
		// 	/* 格子背景色 */
		// 	display: flex;
		// 	/* 在格子内部进行布局 */
		// 	flex-direction: column;
		// 	/* 使容器内的子元素垂直排列 *
		// 	justify-content: center;
		// 	/* 格子内容水平居中 */
		// 	align-items: center;
		// 	/* 格子内容垂直居中 */
		// 	border: 1rpx solid rgb(219,219,219);
		// 	margin: 1rpx 1rpx 0rpx 1rpx;	
		// }
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-template-rows: repeat(3,1fr);
		gap:1rpx;
		
		view{
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			border: 1rpx solid rgb(219,219,219);
		}
		
	}

</style>
